<div style="font-weight:bold;font-size:20px;margin-top: 20px;">${serialNumber}、通勤人口职住地分布</div>
<div id="table6-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
</div>
<#--<table  id='table6' style="margin-top:20px;">
    <tr>
        <th>区县</th>
        <th>人数</th>
    </tr>
</table>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">表6 通勤人口居住地分布情况</div>-->
<div id="map6" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图4 通勤人口居住地分布情况</div>

<#--<table  id='table7' style="margin-top:15px;">
    <tr>
        <th>区县</th>
        <th>人数</th>
    </tr>
</table>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">表7 通勤人口工作地分布情况</div>-->
<div id="map7" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图5 通勤人口工作地分布情况</div>
<script>
    (function () {
        var result6 = ${dataTable6}
        var result7 = ${dataTable7}
        /*var result6 = [
            { pubArea: "海口", pubCount: 6 },
            { pubArea: "白沙", pubCount: 565 },
            { pubArea: "陵水", pubCount: 44 },
        ];
        var result7 = [
            { pubArea: "海口", pubCount: 6 },
            { pubArea: "三亚", pubCount: 99 },
            { pubArea: "文昌", pubCount: 44 },
        ];*/
        var dataTable6First = ${dataTable6First}
        var dataTable6FirstWork = ${dataTable6FirstWork}
        var dataTable6Second = ${dataTable6Second}
        var dataTable6SecondWork = ${dataTable6SecondWork}
        $("#table6-desc").text('据统计结果发现，居住在' + dataTable6First.county + '区域的人数最多，高达' + (dataTable6First.count/10000).toFixed(2) + '万人，该区域对应的工作人口数量为' + (dataTable6FirstWork/10000).toFixed(2) +'万人；其次是' + dataTable6Second.county + '区域，居住人数为' + (dataTable6Second.count/10000).toFixed(2) + '万人，工作人数为' + (dataTable6SecondWork/10000).toFixed(2) + '万人。${coWorkHomeDescP2}')
        // 工作在X区域的人数最多，高达X人，该区域对应的居住人口数量为X人；其次是X区域，工作人数为X人，居住人数为X人。
        $(document).ready(function(){
            // $.each(dataTable6,function(index,item){
            //     var tr='<td>'+item.county+'</td>'+'<td>'+item.count+'</td>';
            //     $("#table6").append('<tr>'+tr+'</tr>')
            // });
            // $.each(dataTable7,function(index,item){
            //     var tr='<td>'+item.county+'</td>'+'<td>'+item.count+'</td>';
            //     $("#table7").append('<tr>'+tr+'</tr>')
            // });
            var outdata6 = $.map(result6, function(n, i){
                return {
                    name: n.county,
                    value: n.count
                }
            });
            var option6 = getOptionMap(outdata6);
            var echartsMap6 = echarts.init(document.getElementById("map6"));
            echarts.registerMap("hainan", hainan);
            echartsMap6.setOption(option6);

            var outdata7 = $.map(result7, function(n, i){
                return {
                    name: n.county,
                    value: n.count
                }
            });
            var option7 = getOptionMap(outdata7);
            var echartsMap7 = echarts.init(document.getElementById("map7"));
            echarts.registerMap("hainan", hainan);
            echartsMap7.setOption(option7);
        });
        function getOptionMap(outdata) {
            var option = {
                tooltip: {
                    show: true,
                    formatter: function (params) {
                        if (params.value) {
                            return (
                                "&nbsp;&nbsp;" +
                                params.name +
                                "&nbsp;&nbsp;&nbsp;" +
                                params.value +
                                "&nbsp;&nbsp;"
                            );
                        } else {
                            return (
                                "&nbsp;&nbsp;" +
                                params.name +
                                "&nbsp;&nbsp;&nbsp;0&nbsp;&nbsp;"
                            );
                        }
                    },
                },
                visualMap: {
                    type: 'piecewise',
                    min: 0,
                    max: 2000000,
                    left: 20,
                    bottom: 0,
                    showLabel: !0,
                    padding: [15, 10],
                    backgroundColor: "transparent", //标题背景色
                    borderColor: "#01698C", //边框颜色
                    color: "#01698C",
                    textStyle: {
                        color: "#000"
                    },
                    borderWidth: 1,
                    pieces: [
                        {
                            gt: 2000000,
                            label: "200万以上",
                            color: "#FF1B00"
                        },
                        {
                            gte: 2000000,
                            lte: 1000000,
                            label: "100万 - 200万",
                            color: "#DE6B00"
                        },
                        {
                            gte: 200000,
                            lt: 1000000,
                            label: "20万 - 100万",
                            color: "#F1CE2A"
                        },
                        {
                            value: 0,
                            color: "rgba(1,63,77, 0.3)"
                        }
                    ],
                    show: !0
                },
                geo: {
                    map: "hainan",
                    roam: !1,
                    scaleLimit: {
                        min: 1,
                        max: 2
                    },
                    zoom: 1.2,
                    label: {
                        show: true,
                        color: "#fff",
                        fontSize: 12
                    },
                    itemStyle: {
                        normal: {
                            borderColor: "#22A3BE",
                            areaColor: "rgba(1,89,98, 0.2)",
                            borderWidth: 1,
                            shadowBlur: 0.01,
                            shadowColor: "rgba(63, 218, 255, 1)"
                        },
                        emphasis: {
                            areaColor: "rgba(243, 131, 75, 0.8)",
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            borderWidth: 0,
                            shadowBlur: 20,
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                        }
                    },
                },
                series: [
                    {
                        type: "map",
                        map: "hainan",
                        aspectScale: 0.75,
                        zoom: 1.2,
                        label: {
                            normal: {
                                formatter: function (para) {
                                    return "{name|" + para.name + "}";
                                },
                                rich: {
                                    cnNum: {
                                        fontSize: 11,
                                        color: "#333333",
                                        align: "center",
                                    },
                                    name: {
                                        fontSize: 10,
                                        color: "#333333",
                                        align: "center",
                                        lineHeight: 20,
                                    },
                                },
                                //formatter: '{b}',
                                color: "#333333",
                                show: true,
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                        itemStyle: {
                            normal: {
                                areaColor: "#D9EEFF",
                                borderColor: "#fff",
                                borderWidth: 1,
                            },
                            emphasis: {
                                areaColor: "#FFAE00",
                            },
                        },
                        data: outdata,
                        nameMap: {
                            海口: "海口市",
                            三亚: "三亚市",
                            儋州: "儋州市",
                            五指山: "五指山市",
                            琼海: "琼海市",
                            文昌: "文昌市",
                            万宁: "万宁市",
                            东方: "东方市",
                            定安: "定安县",
                            屯昌: "屯昌县",
                            澄迈: "澄迈县",
                            临高: "临高县",
                            白沙: "白沙黎族自治县",
                            昌江: "昌江黎族自治县",
                            乐东: "乐东黎族自治县",
                            陵水: "陵水黎族自治县",
                            保亭: "保亭黎族苗族自治县",
                            琼中: "琼中黎族苗族自治县",
                            南海诸岛: "三沙市"
                        },
                    },
                ],
            }
            return option
        }
    })()
</script>